<!-- 时序图 -->
<template>
  <div class="timingDiagram-pack flexs" :style="{'--height':height}">
    <el-table :data="tableData" style="width: 100%;" :height="height"   border stripe>
      <el-table-column
        prop="date"
        :label="$i18n.t('mesRequirePlan.productList')"
        width="180"
        align="center"
        fixed="left"
      >
        <template slot-scope="{ row }">
          <div class="pack">
            <div :title="row.planCode" v-if="row.planCode"  style="width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
                    <p style="color: #3c7fcd; width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor:pointer"
                      @click="goTo(row)"
                    >
                    {{row.planCode}}
                  </p>
            </div>
            <p class="fontW-600" :title="row.prodName">
              {{ row.prodName || "-" }}
            </p>
            <p :title="`${row.workshopName}(${row.lineName||'-'})`">{{ row.workshopName || "-" }}({{ row.lineName || "-" }})</p>
            <!-- <p :title="row.lineName">{{ row.lineName || "-" }}</p> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        :width="125 * timeData.length"
        class-name="date-pack"
      >
        <template v-slot:header="{ column, $index }">
          <div class="flexs table">
            <div class="th" :key="i" v-for="(ite, i) in timeData">
              {{ ite }}
            </div>
          </div>
        </template>

        <template slot-scope="{ row, $index }">
          <el-slider
            v-model="setDateList[$index].val"
            range
            class="pack"
            :disabled="data.info"
            show-stops
            @change="(val) => changeSlider(val, $index)"
            :max="timeData.length"
            :format-tooltip="(e) => formatTooltip($index, e)"
          ></el-slider>
        </template>
      </el-table-column>
    </el-table>

    <!-- <div class="left">
      <div class="table width-100">
        <div class="th title">产品列表</div>

        <div :key="i" v-for="(ite, i) in tableData" class="pack">
          <p class="fontW-600" :title="ite.prodName">
            {{ ite.prodName || "-" }}
          </p>
          <p :title="ite.workshopName">{{ ite.workshopName || "-" }}</p>
          <p :title="ite.lineName">{{ ite.lineName || "-" }}</p>
        </div>
      </div>
    </div>
    <div class="right" v-if="timeData && timeData.length">
      <div class="table">
        <div class="flexs">
          <div class="th" :key="i" v-for="(ite, i) in timeData">
            {{ ite }}
          </div>
        </div>
        <div :key="i" v-for="(ite, i) in setDateList">
          <el-slider
            v-model="ite.val"
            range
            class="pack"
            :disabled="data.info"
            show-stops
            @change="(val) => changeSlider(val, i)"
            :max="timeData.length"
            :format-tooltip="(e) => formatTooltip(i, e)"
          ></el-slider>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
//例如：import 《组件名称》 from '《组件路径》';
import { getRequirePlanPreList } from "@/api/order/mesRequirePlan.js";
export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    data: Object,
    height: {
      type: String,
      default:"440px"
    }
  },
  data() {
    //这里存放数据
    return {
      setDateList: [],
      timeData: [],
      tableData: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    data: {
      handler({ timeData = [], tableData = [] }, old) {
        console.log(888, timeData, tableData);
        this.setDateList = [];
        this.timeData = timeData;
        tableData.map((ite) => {
          let { planBeginDate, planEndDate } = ite;
          let start = this.timeData.findIndex((ite) =>
            planBeginDate.includes(ite)
          );
          let end = this.timeData.findIndex((ite) => planEndDate.includes(ite));
          this.setDateList.push({ val: [Number(start), Number(end + 1)] });
        });
        this.tableData = tableData;
      },
      deep: true,
      immediate: true,
    },
  },
  //方法集合
  methods: {
       //跳转详情页
    goTo(row) {
      this.$router.push({
        path: "/order/mesProdOrderPlan/see",
        query: { id: row.planCode },
      });
    },
    // 重新包装toolip
    formatTooltip(index) {
      try {
        if (this.setDateList[index].val[0] == this.setDateList[index].val[1]) {
          throw new Error($i18n.t('mesRequirePlan.errorOccurred'));
          return;
        }

        return `${this.timeData[this.setDateList[index].val[0]]}- ${
          this.timeData[this.setDateList[index].val[1] - 1]
        }`;
      } catch (error) {
        console.log(11, this.setDateList[index].val);
        return "-";
      }
    },
    // 查询详情
    async getRequirePlanPreList() {
      let res = await getRequirePlanPreList(this.query);
      let { timeList, mesRequireOrderPlanPreList } = res.data.result;

      this.tableData = timeList;
    },
    changeSlider(val, index) {
      console.log(22, val);
      if (val && val.length) {
        if (val[0] == val[1]) {
          if (this.timeData[val[1] - 1]) {
            this.$set(val, 0, val[0] - 1);
          } else {
            this.$set(val, 1, val[1] + 1);
          }
        }
        this.$nextTick(() => {
          this.$emit("changeSlider", {
            date: [this.timeData[val[0]], this.timeData[val[1] - 1]],
            index,
          });
        });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},

  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="scss">
.timingDiagram-pack {
  width: 100%;
  height: var(--height);
  box-sizing: border-box;
  // overflow-y: auto;

  .table {
    .th {
      // padding: 10px 8px;
      text-align: center;
      // background: #f5f7fa;
      border: 1px solid #ebf0f5;
      cursor: pointer;
      color: #666;
      // font-size: 14px;
      width: 125px;
      display: flex;

      align-items: center;
      justify-content: center;
      border-right: 1px solid #dedede;
    }
  }

  /deep/.cell {
    // font-size: 14px;
  }
  .title {
    width: 150px !important;
  }
  .pack {
    font-size: 14px;
    color: #333;
    // height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // padding: 0px 10px;
    // border: 1px solid #ebf0f5;
    border-top: 0px;
    // margin-bottom: 16px;
    p {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 100%;
      flex-shrink: 0;
      // font-size: 14px;
    }
  }

  // .right {
  //   // border: 1px solid #ebf0f5;
  //   box-sizing: border-box;
  //   width: calc(100% - 150px);
  //   margin: 0 20px;
  //   // overflow-x: auto;
  //   // overflow: auto;
  /deep/.el-table--enable-row-hover {
    .el-table__body tr:hover > td {
      background-color: red !important;
      /* color: #fff; */
    }
  }
  /deep/.el-slider__runway {
    height: 45px;
    border-radius: 45px;
  }
  /deep/.el-slider__bar {
    height: 45px;
    border-radius: 45px;
    background-color: #3b82f680;
  }
  /dee/.el-slider__button-wrapper {
    z-index: 1 !important;
  }
  .el-drawer__content {
    padding: 0px;
  }
  .el-tooltip__popper {
    left: 20%;
    top: 10px;
  }
  /deep/.el-slider__button-wrapper {
    top: 5px;
    z-index: 1;
  }
  /deep/.el-slider__runway {
    margin: 0px !important;
    background-color: #dde8f8;
  }
  /deep/.el-slider__stop {
    // height: 45px !important;
  }

  /deep/.date-pack {
    padding: 0px !important;
    .th {
      height: 40px;
    }
  }
}
// }
.flexs {
  display: flex;
}
.height-90 {
  height: 45px;
}
.fontW-600 {
  font-weight: 600;
}
.width-100 {
  width: 100%;
}
</style>
